<!DOCTYPE html>
<html  lang="en">
    <head>
        <title>Document</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
        <style type="text/css">
            * {
              margin: 0px;
              padding: 0px;
            }
            html,body {
              width: 100%;
              height: 100%;
              overflow-y: hidden;
            }
           footer ul {
            display: flex;
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 40px;
           }       
           footer ul li {
            flex: 1;
            text-align: center;
            list-style: none;
            height: 40px;
            line-height: 40px;
            background: gray;
           }
           /* 进场动画 */
           @keyframes move-in {
             0% {
               transform: translateX(100px);
               opacity: 0;
             }
             100% {
               transform: translateX(0px);
               opacity: 1;
             }
           }
           /* 离场动画 */
           @keyframes move-out {
             0% {
               transform: translateX(0px);
               opacity: 1;
             }
             100% {
               transform: translateX(-100px);
               opacity: 0;
             }
           }
           .move-enter-active {
               animation: move-in 1s;
           }
           .move-leave-active {
               animation: move-out 1s;
           }
        </style>
    </head>
    <body>
        <div id="app">
            <keep-alive>
                <!-- mode="out-in" 先出后进模式 -->
                <transition name="move" mode="out-in">
                    <compoent :is="who"></compoent>
                </transition>
            </keep-alive>
            
            <footer>
                <ul>
                    <li><a @click="who='home'">首页</a></li>
                    <li><a @click="who='list'">列表页</a></li>
                    <li><a @click="who='shopcar'">购物车</a></li>
                </ul>
            </footer>
        </div>

        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    who: 'home',
                },
                components: {
                    home: {
                        template: `<div><h1>home</h1></div>`,
                    },
                    list: {
                        template: `<div><h1>list</h1></div>`,
                    },
                    shopcar: {
                        template: `<div><h1>shopcar</h1></div>`,
                    }
                }
            })
        </script>
    </body>
</html>